<template>
	<view class="container">
		<view class="imgSrc">
			<image :src="imgSrc" class="imgsss"></image>
		</view>


		<view class="content">
		</view>
		<view class="bottom-navigation">
			<view class="bottom-item left" @click="goQrCode">

				<image src="https://ffa.firstui.cn/uploadfile/240816220549920.png" class="icon"></image>

				<text style="color: #fff;">CDK扫码</text>
			</view>
			<view class="bottom-item right" @click="goPhotoCDK">
				<image src="https://ffa.firstui.cn/uploadfile/240816215353579.png" class="icon"></image>
				<text style="color: #fff;">生成二维码</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { url } from '@/utils/request.js';

const imgSrc = ref('');
const base64 = ref('');

const getStoredData = () => {
  const storedData = uni.getStorageSync('clickData');
  if (storedData) {
    return JSON.parse(storedData);
  }
  return { count: 0, lastClickTime: 0 };
};

const setStoredData = (data) => {
  uni.setStorageSync('clickData', JSON.stringify(data));
};

const goPhotoCDK = async () => {
  const now = Date.now();
  const storedData = getStoredData();

  // 检查是否超过一分钟（60,000毫秒）
  if (now - storedData.lastClickTime >= 24*60*60*1000) {
    storedData.count = 0;
  }

  if (storedData.count < 3) {
    storedData.count += 1;
    storedData.lastClickTime = now;
    setStoredData(storedData);
    console.log('Click count:', storedData.count);

    try {
      const res = await uni.request({
        url: url + '/photo/createQRCode', // Replace with the actual image URL
        responseType: 'arraybuffer',
      });

      const base64Data = uni.arrayBufferToBase64(res.data); // Convert ArrayBuffer to Base64
      base64.value = base64Data;
      imgSrc.value = `data:image/png;base64,${base64Data}`;
    } catch (err) {
      console.error('Error fetching photo:', err);
    }
  } else {
    uni.showModal({
      content: '一分钟内只能点击三次。',
      confirmText: 'OK',
      success: () => {},
    });
  }
};

onMounted(() => {
  const storedData = getStoredData();
  const now = Date.now();

  // 如果上次点击时间距离现在超过一分钟，则重置计数器
  if (now - storedData.lastClickTime >= 24*60*60*1000) {
    storedData.count = 0;
    storedData.lastClickTime = now;
    setStoredData(storedData);
  }
});
</script>


<style>
	.imgSrc{
	      position: absolute;
	      top: 50%;
	      left: 24%;
	      margin: 0 0px;
	  
	      height: 27%;
	}
	.imgsss{
		  height: 201px;
		      width: 214px;
		    border-radius: 32px;
	}
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-image: url('https://ffa.firstui.cn/uploadfile/240822201753363.png');
		background-size: cover;
		/* 使背景图片覆盖整个容器 */
		background-position: center;
		/* 居中显示图片 */
		background-repeat: no-repeat;
		/* 防止背景图片重复 */
	}


	.content {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.main-image {
		width: 100%;

	}

	.bottom-navigation {
		display: flex;
		justify-content: space-between;
		padding: 10px;
		margin-bottom: 34px;

	}

	.bottom-item {
		display: flex;

		flex-direction: column;
		align-items: center;
	}

	.icon {
		width: 69px;
		height: 64px;
	}
</style>